<template>
  <div class="box">
    <div class="title">船舶监测情况</div>
    <div class="chart">
      <div
        class="chart-item"
        v-for="(item, index) in chatOptions"
        :key="item.prop"
        :style="`background-image: url('${item.img}')`"
        @click="handleSelect(index)"
      >
        <div class="number">{{ chartData[item.prop] }}H</div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="net" ref="net"></div>
    <div class="type-list">
      <div class="type-item" v-for="item in typeOptions" :key="item.prop">
        <div class="number" :style="`background-color: ${item.color}`">
          <div class="number-value">{{ typeData[active][item.prop] }}</div>
          <span>m³</span>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
const netData = [
  [3, 5, 1, 2, 1, 2, 2],
  [3, 2, 4, 4, 2, 1, 4],
];
const colors = [
  "#AA25F6",
  "#DFE34A",
  "#E35234",
  "#30D49E",
  "#C42386",
  "#F27420",
  "#66CCFF",
];
const initChartData = (val, index) => {
  return {
    value: val,
    itemStyle: {
      color: colors[index],
    },
  };
};
export default {
  data() {
    return {
      chatOptions: [
        {
          name: "船舶1",
          prop: "code1",
          img: "/img/screen/circle1.png",
        },
        {
          name: "船舶2",
          prop: "code2",
          img: "/img/screen/circle2.png",
        },
      ],
      chartData: {
        code1: 10,
        code2: 16,
      },
      typeOptions: [
        {
          prop: "code1",
          name: "F.O.1.P",
          color: "#1E9A9B",
        },
        {
          prop: "code2",
          name: "F.O.1.S",
          color: "#A49B79",
        },
        {
          prop: "code3",
          name: "F.O.2.P",
          color: "#A45D66",
        },
        {
          prop: "code4",
          name: "F.O.2.S",
          color: "#984367",
        },
        {
          prop: "code5",
          name: "F.O.3.P",
          color: "#912892",
        },
        {
          prop: "code6",
          name: "F.O.3.S",
          color: "#66CCFF",
        },
      ],
      typeData: [
        {
          code1: 4.2,
          code2: 4.3,
          code3: 2.5,
          code4: 2.1,
          code5: 2.0,
          code6: 2.1,
        },
        {
          code1: 4.2,
          code2: 2.3,
          code3: 2.3,
          code4: 4.1,
          code5: 2.1,
          code6: 4.1,
        },
      ],
      active: 0,
      myChart: null,
    };
  },
  methods: {
    initChart(data) {
      const seriesData = data.map((m, i) => {
        return initChartData(m, i);
      });
      this.myChart = echarts.init(this.$refs.net);
      const options = {
        xAxis: {
          type: "category",
          data: ["1#M/E", "2#M/E", "3#M/E", "4#M/E", "D/G(P)", "D/G(S)", "T/G"],
          axisLabel: {
            textStyle: {
              color: "white", // 将 x 轴字体颜色设置为白色
              fontSize: 10,
            },
          },
          axisLine: {
            lineStyle: {
              color: "white", // 将 x 轴线的颜色设置为白色
            },
          },
        },
        yAxis: {
          show: false,
          type: "value",
        },
        grid: {
          left: "0%",
          right: "0%",
          top: "20px",
          bottom: "20px",
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            label: {
              show: true,
              position: "top",
              formatter: "{c} H",
            },
          },
        ],
      };
      this.myChart.setOption(options);
    },
    handleSelect(index) {
      this.active = index;
      const seriesData = netData[this.active].map((m, i) => {
        return initChartData(m, i);
      });
      this.myChart.setOption({
        series: [
          {
            data: seriesData,
          },
        ],
      });
    },
  },
  mounted() {
    this.initChart(netData[0]);
  },
};
</script>

<style scoped lang="scss">
.box {
  background-image: url("/img/screen/card.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  padding: 15px;
  .title {
    height: 20px;
  }
  .chart {
    margin-top: 15px;
    height: 30%;
    display: flex;
    justify-content: space-around;
    .chart-item {
      aspect-ratio: 1 / 1;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
      cursor: pointer;
      .number {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
      }
      .name {
        position: absolute;
        height: 20px;
        width: 100%;
        bottom: -5px;
        left: 0;
        line-height: 20px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
  .net {
    margin-top: 15px;
    height: 30%;
    width: 100%;
  }
  .type-list {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(6, calc(85% / 6));
    grid-column-gap: 3%;
    height: calc(100% - 20px - 15px - 15px -15px - 40% - 30%);
    .type-item {
      .number {
        aspect-ratio: 1 /1;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .number-value {
          font-size: 20px;
        }
        span {
          font-size: 12px;
          height: 20px;
          line-height: 26px;
        }
      }
      .name {
        font-size: 12px;
        text-align: center;
      }
    }
  }
}
</style>
